<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>边缘计算平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
</head>
<body>

<form class="layui-form layui-fluid" action="">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>设备信息</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">设备名称</label>
        <div class="layui-input-inline">
            <input type="text" name="deviceName" lay-verify="title" autocomplete="off" placeholder="请输入您的设备名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <table>
            <tr>
                <td>
                    <label class="layui-form-label">设备模板</label>
                </td>
                <td width="190">
                    <select name="deviceType" id="deviceType" lay-filter="required" lay-search="">
                        <option value="">请输入关键字</option>
                    </select>
                </td>
                <td width="5"></td>
                <td>
                    <div id="layerDemo">
                        <div id="setProductDetail" class="site-demo-button">
                            <button type="button" class="layui-btn layui-btn-md layui-btn-disabled">详情</button>
                        </div>
                    </div>

                </td>
            </tr>
        </table>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通信协议</label>
        <div class="layui-input-inline">
            <select name="deviceProtocol" id="deviceProtocol">
                <option value="OTHER" selected="">Modbus</option>
                <option value="HTTP">HTTP</option>
                <option value="WIFI" >WIFI</option>
                <option value="CELLULAR">蜂窝(2G/3G/4G)</option>
                <option value="OTHER">其他</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">地址设定</label>
            <div class="layui-input-inline" id="setAddress">
                <input type="text"id="addressPlaceholder" autocomplete="off" placeholder="请选择设备模板" class="layui-input" disabled="">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">设备路径</label>
        <div class="layui-input-inline">
            <input type="text" name="devicePath"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">位置信息</label>
        <div class="layui-input-inline">
            <input type="text" name="deviceLocation"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">有效期至</label>
        <div class="layui-input-inline">
            <input type="text" name="deviceFailDate" id="deviceFailDate" lay-verify="deviceFailDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" lay-event="dateFormat">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">初始状态</label>
        <div class="layui-input-inline">
            <select name="deviceStatus" lay-filter="aihao">
                <option value=""></option>
                <option value=1 selected="">开启</option>
                <option value=0>关闭</option>
            </select>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>更多信息</legend>
    </fieldset>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">设备描述</label>
        <div class="layui-input-block">
            <textarea name="deviceDesc"placeholder="请输入设备描述" class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item" style="display: none">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="formVerify">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var $= layui.jquery, layer = layui.layer;
        var form = layui.form;
        var pp;
        //动态加载设备类型
        $(document).ready(function() {
            var laydate = layui.laydate;
            var hh = sessionStorage.getItem("productNames");
            pp = JSON.parse(hh);
            laydate.render({
                elem: '#deviceFailDate'
            });
            for(k=0;k<pp.length;k++){
                var option = document.createElement("option");  // 创建添加option属性
                option.setAttribute("value",pp[k].productId); // 给option的value添加值
                option.innerText=pp[k].productName;     // 打印option对应的纯文本
                deviceType.appendChild(option);           //给select添加option子标签
            }
            form.render("select");            // 刷性select，显示出数据
        });
        //地址设定 根据不同设备类型设置地址
        form.on('select(required)', function (obj) {
            var data = obj.data;
            var addressObj = document.getElementById("setAddress");
            var addressObj1 = document.getElementById("setProductDetail");
            if(document.getElementById("addressPlaceholder") ){
                var addressPlaceholder = document.getElementById("addressPlaceholder");
                addressPlaceholder.style.display="none";
            }
            if (obj.elem.selectedIndex-1 < 0){
                addressObj.innerHTML='<input type="text"id="addressPlaceholder" autocomplete="off" placeholder="请选择设备模板" class="layui-input" disabled="">';
                addressObj1.innerHTML='<button type="button" class="layui-btn layui-btn-md layui-btn-disabled">详情</button>';
            } else {
//                addressObj1.innerHTML='<button type="button" data-method="setTop" class="layui-btn layui-btn-md">详情</button>';
                addressObj1.innerHTML='<button type="button"  data-method="setTop" class="layui-btn layui-btn-md" onclick="devProductDetail()">详情</button>';
                if (pp[obj.elem.selectedIndex-1].productType == "网关"){
                    addressObj.innerHTML='<div class="layui-input-inline"> <input type="text" name="deviceAddress" autocomplete="off" placeholder="请输入设备IP地址" class="layui-input"></div><div class="layui-input-inline" style="width: 75px;"><input type="text" name="deviceAddressPort" placeholder="端口号" autocomplete="off" class="layui-input"></div>';
                }else{
                    addressObj.innerHTML='<div class="layui-input-inline"> <input type="text" name="deviceAddress" autocomplete="off" placeholder="请输入设备地址" class="layui-input"></div><div class="layui-input-inline" style="width: 75px;"><input type="text" name="deviceAddressPort" placeholder="端口号" autocomplete="off" class="layui-input"></div>';
             }
            form.render();
        }});

        form.on('submit(formVerify)', function (obj) {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var layedit = layui.layedit;
            var data = JSON.stringify(obj.field);
            var url = "/api/addDevice";
            var code = 0;

            layui.jquery.ajax({
                type: "post",
                url: url,
                async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                data: data,
                contentType: "application/json",
                // processData: false,
                // cache: false,
                success: function (ev) {
                    var url1 = "";
                    var data1 = JSON.stringify(ev.field);
                    layui.jquery.ajax({
                        type: "post",
                        url: url1,
                        async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                        data: data1,
                        contentType: "application/json",
                        success: function (evs) {
                            console.log(evs);//返回的addressable Json文件
                            code = evs.code;
                        }
                    });
                    code = ev.code;
                }
            });
            if (code == 500) {
                console.log("提交失败");
            }
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
            // 刷新表格（即点击分页控件的“确定”按钮）
            parent.layui.table.reload("deviceTable");
        });
    });
    function devProductDetail() {
        var obj0 = document.getElementById("deviceType");
        console.log('url:   '+'/pages/productDetails?productId?='+obj0.options[obj0.selectedIndex].value);
        layui.use(['layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            var that = this;
            layer.open({
                type: 2,
                title: "模板详情",
                closeBtn: 1,
                area: ['390px', '260px'],
                shade: 0,
                maxmin:true,
                offset: [ //为了演示，随机坐标
                    Math.random()*($(window).height()-300)
                    ,Math.random()*($(window).width()-390)
                ],
                id: 'LAY_layuipro1', //设定一个id，防止重复弹出
                btn: ['关闭'],
                btn2: function(){
                    layer.closeAll();
                },
                btnAlign: 'c',
                moveType: 1, //拖拽模式，0或者1
//                content: '//layer.layui.com/test/settop.html',
                content: '/pages/productDetails?productId='+obj0.options[obj0.selectedIndex].value,
                zIndex: layer.zIndex //重点1
                ,success: function(layero){
                    layer.setTop(layero); //重点2
                }

            });
        });
    }
</script>

</html>